<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${ctx}/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/uploadify/swfobject.js"></script>
<script type="text/javascript" src="${ctx}/js/uploadify/jquery.uploadify.v2.1.0.js"></script>
<link rel="stylesheet" href="${ctx}/js/uploadify/uploadify.css" type="text/css" />

	<style type="text/css">
           body{font-size:13px}
           .divFrame{width:375px;border:solid 1px #666}
           .divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold}
           .divFrame .divContent{padding:15px;line-height:1.6em}
           /*.divFrame .divContent ul{padding:0px;margin:0px;list-style-type:none}
           .divFrame .divContent ul li{float:left;margin-right:3px}
           .divFrame .divContent ul li img{border:solid 1px #ccc;padding:2px;width:60px;height:60px}
           .divFrame .divContent ul li a{font-size:9pt}*/
           /*重点：固定表头样式*/
<!-- 
body,table, td, a {font:9pt;} 
/*重点：固定行头样式*/
.scrollRowThead{position: relative; 
left: expression(this.parentElement.parentElement
.parentElement.parentElement.scrollLeft);
z-index:0;}
/*重点：固定表头样式*/
.scrollColThead {position: relative;
top: expression(this.parentElement.parentElement
.parentElement.scrollTop);
z-index:2;}
/*行列交叉的地方*/
.scrollCR { z-index:3;}
/*div外框*/
.scrollDiv {height:200px;clear: both; 
border: 1px solid #EEEEEE;
OVERFLOW: scroll;width: 320px; }
/*行头居中*/
.scrollColThead td,.scrollColThead th
{ text-align: center ;}
/*行头列头背景*/
.scrollRowThead,.scrollColThead td,.scrollColThead th
{background-color:EEEEEE;}
/*表格的线*/
.scrolltable{
border-bottom:1px solid #CCCCCC; 
border-right:1px solid #CCCCCC; }
/*单元格的线等*/
.scrolltable td,.scrollTable th{
border-left: 1px solid #CCCCCC; 
border-top: 1px solid #CCCCCC; 
padding: 5px; }
-->
    </style>
	<script type="text/javascript">
		/// <reference path="../Jscript/jquery-1.4.2-vsdoc.js"/>
/// <reference path="../Jscript/jquery-1.4.2.js"/>
$(function() {
    $("#annex").uploadify({
        'uploader': '/js/uploadify/Images/uploadify.swf',
        'script': '/sys/uploadify/upload',
        'cancelImg': '/js/uploadify/Images/cancel.png',
        'folder': '/upload/annex',
        'queueID': 'fileQueue',
        'buttonImg': '/js/uploadify/Images/uploadify.jpg',
        'auto': false,
        'multi': true,
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png;*.doc;*.docx;*.xls;*.xlsx;*.pdf;*.txt',
        'onComplete': function(event, queueID, fileObj, response, data) {
           //data : 上传附件的顺序  ,比如 2 1 0 三个附件.
           eval("var obj1="+response);
           alert(obj1.name+"id - "+obj1.id);
           var fileId = 2;
           var filename = obj1.name;
           /*alert(response.responseText);
           jsonObject = jQuery.parseJSON(response.response);
            alert (jsonObject);  
            alert(jsonObject.name);*/
            $('#showAnnex').append(SetFileContent(fileObj,fileId,fileName));
            SetUploadFile();
        }
    })
})

$(function() {
	//设置各表项ID号
    $("#showAnnex tr:not(.scrollColThead)").each(function(tr_i) {
        $(this).attr("id", "tr_" + tr_i);
    })

    //设置各链接的rel属性值
    $("#showAnnex tr:not(.scrollColThead) a").each(function(a_i) {
        $(this).attr("rel", a_i);
    }).click(function() {//设置各链接的单击事件
        //通过自身的rel值，获取表项的ID号
        var tr_id = "#tr_" + this.rel;
        //根据ID号，删除某个表项
        alert("这里进行删除操作-初始化");
        $(tr_id).remove();
    })
})
function SetFileContent(objFile,fileId,fileName) { //根据上传对象返回预览的图片
    var sLi = "";
    sLi += "<tr><td class='scrollRowThead'>";
    sLi += "<img src='/Icons/icon018a4.gif' width='20' height='20'></td><td>"+fileId+":"+fileName;
    sLi += "<input type='hidden' value='" + objFile.filePath + "'>";
    sLi += "</td><td>";
    sLi += "<a href='javascript:void(0)'>删除</a>";
    sLi += "</td></tr>";
    return sLi;
}
/*function SetFileContent(objFile) { //根据上传对象返回预览的图片
    var sLi = "";
    sLi += "<li>";
    sLi += "<img src='" + objFile.filePath + "' width='100' height='100'>"+objFile.filePath;
    sLi += "<input type='hidden' value='" + objFile.filePath + "'>";
    sLi += "<br />";
    sLi += "<a href='javascript:void(0)'>删除</a>";
    sLi += "</li>";
    return sLi;
}*/
function SetUploadFile() {
    //设置各表项ID号
    $("#showAnnex tr:not(.scrollColThead)").each(function(tr_i) {
        $(this).attr("id", "tr_" + tr_i);
    })

    //设置各链接的rel属性值
    $("#showAnnex tr:not(.scrollColThead) a").each(function(a_i) {
        $(this).attr("rel", a_i);
    }).click(function() {//设置各链接的单击事件
        //通过自身的rel值，获取表项的ID号
        alert("这里进行删除操作");
        var tr_id = "#tr_" + this.rel;
        //根据ID号，删除某个表项
        $(tr_id).remove();
    })
}
</script> 
  </head>
  
  <body>
    <div class="divFrame">
        <div class="divTitle">
              上传图片
        </div>
        <div class="divContent">
        	<table id="showAnnex" border=1>
        		<tr class="scrollColThead">
        			<th class="scrollRowThead scrollCR">类型</th>
        			<th>文件名称</th>
        			<th>操作</th>
        		</tr>
        		<%
        			int jj=4;
        			for(int i=0;i<jj;i++){
        		%>
        		<tr>
        			<td>类型</td>
        			<td>文件名称</td>
        			<td><a href='javascript:void(0)'>删除</a></td>
        		</tr>	
        		<%
        			}
        		 %>
        	</table>
            <!--  <ul></ul>  -->
        <form method="post" action="/js/uploadify/upload" enctype="multipart/form-data" >
             <div id="fileQueue" style="clear:both;padding-top:5px"></div>
             <div style="padding-top:5px">
             <input type="file" name="annex" id="annex" />&nbsp;&nbsp;
             <A href="javascript:$('#annex').uploadifyUpload();">提交</A>&nbsp;&nbsp;
             <A href="javascript:jQuery('#annex').uploadifyClearQueue()">全部清除</A>
             </div>
         </form>
        </div>
   </div>
  </body>
</html>
